<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
</head>
<body>


<div id="app">
    <counter heading="likes"></counter>
    <counter heading="disLikes"></counter>
</div>

<template id="counter-component">
    <!--只能有一个根元素 否则会报错-->
    <div>
        <h1>{{heading}}</h1>
        <button @click="count++">submit {{count}}</button>
    </div>
</template>

<script src="vue/vue.js"></script>
<script>

    Vue.component('counter',{
        template:"#counter-component",
        props:["heading"],
        data:function () {
            return{count:0}
        }
    });

    new Vue({
        el:"#app"
    });

</script>

</body>
</html>